<template>
  <div :xl="6" :lg="7" class="bg-login">
    <!--logo-->
    <!-- <el-image :src="require('@/assets/logo.png')" class="logo" /> -->
    <!--标题-->
    <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <!--标题-->
        <!-- <h1 class="title">笑游后台管理系统</h1> -->
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <!--form表单-->
    <el-row type="flex" class="row-bg" justify="center" align="bottom">
      <el-col :span="7" class="login-card">
        <!--loginForm-->
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="21%"
          class="loginForm"
        >
          <el-form-item label="账户" prop="username" style="width: 500px">
            <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="width: 500px">
            <el-input
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn-ground">
            <el-button type="primary" @click.native.prevent="handleLogin"
              >立即登陆</el-button
            >
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      loading: false,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    resetForm(refName) {
      // 重置表单
      this.$refs[refName].resetFields();
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>

.bg-login {
 background-image: url("~@/assets/background.png");
  height: 100%;
  background-size: cover; /* 图片覆盖整个背景区域 */
  background-position: center; /* 居中对齐 */
  background-repeat: no-repeat; /* 不重复 */
}

.btn-ground {
  text-align: center;
}

.logo {
  margin: 30px;
  height: 70px;
  width: 70px;
  position: fixed;
}

.title {
  text-shadow: -3px 3px 1px #5f565e;
  text-align: center;
  margin-top: 60%;
  color: #41b9a6;
  font-size: 40px;
}

.row-bg {
  display: flex;
  justify-content: flex-start; /* 水平向左对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.login-card {
  background-color: #ffffff;
  opacity: 0.9;
  box-shadow: 0 0 20px #ffffff;
  border-radius: 10px;
  padding: 40px 40px 30px 15px;
  width: auto;
  margin-top: 13%;
  margin-left: 7%;
}


</style>